<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品列表</title>
    <link rel="stylesheet" href="../static/css/index.css">
    <link href="../static/css/header.css" type="text/css" rel="stylesheet">
</head>
<body>
<!--头部-->
<div>
    <div class="top-01">
        <div class="top-02">
            <ul>
                <li><a href="shops.html"><img src="../static/image/Mi01.png" height="82" width="82" alt="Image 1"/></a></li>
                <li><a style="width: 216px; height: 87px; display: inline-block"><img src="../static/image/yuan01.png"height="100" width="123" alt="Image 2"/></a></li>
                <li class="search-container">
                    <input type="text" name="sou" placeholder="元神降临">
                    <input type="submit" value="" style="background: url('../static/image/Sou01.png') no-repeat; background-size: 42px 40px; width: 40px; height: 40px; border: none;">
                </li>
                <li><a id="head01" href="zhiId"><img src="../static/image/download.webp" height="32" width="32"
                                                     alt="Profile"/></a></li>
                <li id="img-01"><a href="findAllShopsServlet"><img src="../static/image/buyCarBlock.png"
                                                                   alt="Cart"/><span>购物车</span>
                </a></li>
            </ul>
        </div>
    </div>
    <div>
        <div class="headSender01" style="border-radius: 5px;margin-bottom: 20px ">
            <div class="headSender02">
                <div></div>
            </div>
            <div class="headSender03">
                <ul class="zhongjian">
                    <li>全部商品</li>
                    <li>
                        数码百货
                        <ul class="dropdown">
                            <li><a href="findAllProductsServlet">挂件摆件</a></li>
                            <li><a href="findAllProductsServlet">毛绒玩偶</a></li>
                            <li><a href="findAllProductsServlet">数码3c</a></li>
                            <li><a href="findAllProductsServlet">日用百货</a></li>
                        </ul>
                    </li>
                    <li>模玩手办</li>
                    <li>
                        服饰
                        <ul class="dropdown">
                            <li><a href="findAllProductsServlet">短款薄衣装</a></li>
                            <li><a href="findAllProductsServlet">运动服</a></li>
                            <li><a href="findAllProductsServlet">短裤/裙</a></li>
                            <li><a href="findAllProductsServlet">长款薄衣装</a></li>
                            <li><a href="findAllProductsServlet">长款厚衣装</a></li>
                            <li><a href="findAllProductsServlet">长款薄裤装</a></li>
                            <li><a href="findAllProductsServlet">长款厚裤装</a></li>
                            <li><a href="findAllProductsServlet">配饰</a></li>
                            <li><a href="findAllProductsServlet">家居服</a></li>
                            <li><a href="findAllProductsServlet">鞋类</a></li>
                            <li><a href="findAllProductsServlet">箱包</a></li>
                        </ul>
                    </li>
                    <li>礼盒服装</li>
                    <li>人气爆品</li>
                </ul>
            </div>

        </div>
    </div>
</div>
<div id="center-01">
    <div class="menuDiv">
        <ul>
            <li class="menu"><a href="#">综合</a><a href="#">上新</a><a href="#">销量</a><a href="#">价格</a></li>
        </ul>
    </div>
    <div class="shoppingShow">
        <c:forEach items="${pageProducts.data}" var="product">
            <div class="product">
                <a href="#">
                    <div class="imgDiv"><img src="images/${product.image}" height="200" width="200"/></div>
                    <div class="shopName">
                        <p>${product.name}</p>
                        <p>￥<span>${product.price}</span></p>
                    </div>
                </a>
            </div>
        </c:forEach>
    </div>

    <div class="page">
        <a href="findAllProductsServlet?currentPage=1">首页</a>
        <c:if test="${pageProducts.currentPage > 1}">
            <a href="findAllProductsServlet?currentPage=${pageProducts.currentPage - 1}">上一页</a>
        </c:if>
        [${pageProducts.currentPage}/${pageProducts.totalPage}]
        <c:if test="${pageProducts.currentPage < pageProducts.totalPage}">
            <a href="findAllProductsServlet?currentPage=${pageProducts.currentPage + 1}">下一页</a>
        </c:if>
        <a href="findAllProductsServlet?currentPage=${pageProducts.totalPage}">尾页</a>
    </div>
</div>
<%@include file="foot.html"%>
</div>
</body>
</html>
